/**
 * 毕业模版的添加
 */
<template>
  <div class="addgraduationtemplate_box">
    <!-- 步骤条 -->
    <el-steps :active="active" align-center>
      <el-step title="基本信息" />
      <el-step title="设计证书" />
      <el-step title="证书设置" />
    </el-steps>
    <!-- 基本信息 -->
    <div class="basic">
      <el-form
        v-if="active == 1"
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="证书名称" prop="name">
          <el-input v-model="ruleForm.certificateName"></el-input>
        </el-form-item>
        <el-form-item label="证书名称" prop="region">
          <el-select v-model="ruleForm.certificateType" placeholder="请选择证书类型">
            <el-option 
              v-for="(item, index) in typelist"
              :key="index"
              :label="item.typeName"
              :value="item.typeName">

            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="证书背景图" prop="name">
          <!-- 上传图片 -->
          <el-upload
          class="avatar-uploader"
          action="https://jsonplaceholder.typicode.com/posts/"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload">
          <img v-if="ruleForm.certificateSettingImg" :src="ruleForm.certificateSettingImg" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        </el-form-item>
        <el-form-item label="备注信息" prop="name">
          <textarea
           v-model="ruleForm.remark"          
            placeholder="请输入备注信息"
            cols="30"
            rows="10"
            style="width: 300px; height: 100px"
          ></textarea>
        </el-form-item>
      </el-form>
    </div>
    <!-- 设计证书 -->
    <div class="basic designCertificate" v-if="active == 2">
      <div class="box_left">
        <img :src="ruleForm.certificateSettingImg" alt="" />
      </div>
      <el-form :inline="true" class="demo-form-inline">
  <el-form-item label="姓名">
    <el-input style='width:100px;'  v-model="ruleForm.certificateDesignImg[0].cnName" placeholder="姓名"></el-input>
  </el-form-item><br/>
  <!-- <el-form-item label="个人图片">
    <el-input style='width:100px;' v-model="ruleForm.certificateDesignImg.certificateDesignImg" placeholder="姓名"></el-input>
  </el-form-item><br/> -->
  <el-form-item  label="性别">
    <el-select class='select' v-model="ruleForm.certificateDesignImg[1].enName"  placeholder="性别">
      <el-option label="男" value="男"></el-option>
      <el-option label="女" value="女"></el-option>
    </el-select>
  </el-form-item>
</el-form>
      <!-- <div class="box_rigth">
        <div class="header">常用工具</div>
        <div class="ficate_box">
          <p>插入考生信息</p>
          <ul>
            <li>考生姓名</li>
            <li>考生账号</li>
            <li>头像</li>
            <li>人脸照片</li>
          </ul>
        </div>
      </div> -->
    </div>
    <!-- 证书设置 -->
    <div class="basic designSettings" v-if="active == 3">
      <p>
        证书限制：<el-radio v-model="ruleForm.certificateAstrict" 
        label='允许所有毕业或结业学生使用'
          ></el-radio
        >
      </p>
      <p>
        有效期限制： <el-radio v-model="ruleForm.usefulLife" label='证书永久有效'></el-radio>
      </p>
    </div>
    <div class="btn_box">
      <el-button  @click="next">下一步</el-button>
      <el-button  @click="addout">添加</el-button>
      <el-button  type="primary" @click="$router.go(-1)">返回</el-button>
    </div>
  </div>
</template>
<script>
import {
  getNationApi
} from "@/api/basics/classroom";
import {
CertificateAdd
} from "@/api/selfStudy/Graduationtemplate";
// import {
//   upLoadImgApi,
// } from "@/api/educational/teacherManagement"
export default {
  data() {
    return {
      // 步骤条
      active: 1,
      ruleForm: {
        certificateName: "",
        certificateType:'',
        certificateSettingImg:'',
        remark:'',
        certificateAstrict:'',
        usefulLife:'',
        certificateDesignImg:[
          {
            cnName:'',
            },
            {
            enName:'',
            },
         ]
      },
      
      rules: {
        certificateName: [
          { required: true, message: "请输入名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        certificateType: [
          { required: true, message: "请选择类型", trigger: "change" },
        ],
      },
      typelist:'',
      //   单选框
      //   上传图片
      imageUrl:'',
      isLoading: false,
    };
  },
  mounted() {
    this.gettreeList()
  },
  methods: {
    next() {
      if (this.active++ > 2) this.active = 0;
    },
     //类型
    async gettreeList(){
     let res=await getNationApi({parentId:209}) 
     console.log('233',res)
     this.typelist=res.rows
     console.log('23',this.typelist)
   },
   //添加
   async addout(){
      if(this.ruleForm.certificateAstrict=='允许所有毕业或结业学生使用'){
        this.ruleForm.certificateAstrict=0
      }else{
        this.ruleForm.certificateAstrict=1
      }
      if(this.ruleForm.usefulLife=='证书永久有效'){
        this.ruleForm.usefulLife=0
      }else{
        this.ruleForm.usefulLife=1
      }
      let res=await CertificateAdd(this.ruleForm)
      console.log(res)
      this.$message.success("添加成功");
      this.$router.push({
        path: '/SelfStudy/Graduationtemplate',
      });
   },
    // // 上传图片
     handleAvatarSuccess(res, file) {
        this.ruleForm.certificateSettingImg = URL.createObjectURL(file.raw);
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      }
    
    // handleSuccess() {
    //   this.$refs.upload.clearFiles() //上传成功之后清除历史记录
    // },
    // fileChange1(files) {
    //   let formData = new FormData(); 
    //    formData.append('file', files.raw);
    //    console.log(files,'----change');
    //    console.log(this.$refs.upload);
    //   upLoadImgApi(formData).then((res) => {
    //       console.log(res.data.url);
    //       this.ruleForm.certificateSettingImg = res.data.url
    //       if(res.code == 200) {
    //         this.$refs.upload.clearFiles() //上传成功之后清除历史记录
    //       }
    //       // file.target.url = ''
    //       // document.getElementsByName
    //   });
    // },
    //  beforeAvatarUpload(file) {
    //    var img = file.name.substring(file.name.lastIndexOf('.') + 1)
    //   const suffix = img === 'jpg'
    //   const suffix2 = img === 'png'
    //   const suffix3 = img === 'jpeg'
    //   const isLt1M = file.size / 1024 / 1024 < 1;
    //   if (!suffix && !suffix2 && !suffix3) {
    //       this.$message.error("只能上传图片！");
    //       return false
    //   }
    //   // 可以限制图片的大小
    //   if (!isLt1M) {
    //       this.$message.error('上传图片大小不能超过 1MB!');
    //   }
    //   return suffix || suffix2 || suffix3
    //   // console.log(file,'----------file');
    //   // this.isLoading = true
    //   // const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
    //   // const isLt2M = file.size / 1024 / 1024 < 10;
    //   // console.log(isLt2M);

    //   // if (!isJPG) {
    //   //   this.$message.error('上传头像图片只能是 JPG 格式!');
    //   // }
    //   // if (!isLt2M) {
    //   //   this.$message.error(`上传头像图片大小不能超过 ${isLt2M}MB!`);
    //   // }
    //   // return isJPG && isLt2M;
    // },

    
  },
};
</script>
<style lang="scss">
.addgraduationtemplate_box {
  width: 97%;
  margin: 0 auto;
  background: #ffffff;
  border-radius: 10px;
  .basic {
    width: 700px;
    // background: #ccc;
    margin: 10px auto;
    .el-form {
      .el-form-item {
        margin-left: 100px;
        .el-input {
          width: 100px;
        }
        .el-select {
          width: 300px;
        }
        .select{
          width: 100px;
        }
      }
    }
  }
  .designCertificate {
    display: flex;
    justify-content: space-between;
    position: relative;
    // background: #ccc;
    .demo-form-inline{
      position: absolute;
      top: 100px;
    }
    .box_left {
      width: 80%;
      height: 100%;
      img {
        width: 100%;
        height: 100%;
      }
      // background: red;
    }
    // .box_rigth {
    //   width: 35%;
    //   height: 100%;
    //   //   background: gold;
    //   border: 1px solid #ccc;
    //   .header {
    //     height: 40px;
    //     line-height: 40px;
    //     border: 1px solid #ccc;
    //     text-align: center;
    //   }
    //   .ficate_box {
    //     p {
    //       margin: 10px 0;
    //     }
    //     ul {
    //       display: flex;
    //       justify-content: space-around;
    //       flex-wrap: wrap;
    //       li {
    //         width: 100px;
    //         height: 30px;
    //         line-height: 30px;
    //         border: 1px solid #ccc;
    //         text-align: center;
    //         margin: 5px 0;
    //       }
    //     }
    //   }
    // }
  }
  .designSettings {
    p {
      margin: 20px 200px;
    }
  }
  .btn_box {
    padding: 20px 0px;
    width: 300px;
    // background: #ccc;
    margin: 0 auto;
    .el-button{
        margin: 0 10px;
    }
  }
}
// 上传图片
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  // border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>